"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Select } from "@/components/ui/select"

interface SettingsPageProps {
  currentChoiceCount: number
  onSave: (choiceCount: number) => void
  onCancel: () => void
}

export default function SettingsPage({ currentChoiceCount, onSave, onCancel }: SettingsPageProps) {
  const [choiceCount, setChoiceCount] = useState(currentChoiceCount.toString())

  const handleSave = () => {
    onSave(Number.parseInt(choiceCount))
  }

  const choiceOptions = [
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
  ]

  return (
    <div className="text-center max-w-md mx-auto">
      <h2 className="text-3xl font-bold mb-6 text-white">Settings</h2>
      <div className="flex flex-col items-center mb-8">
        <label htmlFor="choiceCount" className="text-lg text-white mb-2">
          Number of Choices
        </label>
        <Select
          options={choiceOptions}
          value={choiceCount}
          onChange={(value) => setChoiceCount(value)}
          className="w-32"
        />
      </div>
      <div className="flex justify-center space-x-4">
        <Button onClick={handleSave} className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
          Save
        </Button>
        <Button onClick={onCancel} className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
          Cancel
        </Button>
      </div>
    </div>
  )
}

